/**
 * @description:中粮奥运活动页面样式
 * @author:Shengzhi Cheung
 * @mail:shengzhizhang@gmail.com
 */

// 变量与混入
@import "variables";
@import "mixins";

/* 样式重置 */
@import "reset";

/* 导入拼图 */
.ico-qzone { background:url(bgimg/ico_sns.png) no-repeat; }
#home .nav-home,
#records .nav-records,
#intro .nav-intro,
#extra .nav-extra { background:url(bgimg/nav_cur_bg.jpg) no-repeat; }
.ornagments { background:url(bgimg/ornagments.png) no-repeat; }
.btn-bg { background:url(bgimg/btn_bg.png) no-repeat; }
.split-line { background:url(bgimg/split_line.png) repeat-x bottom; }
.split-line-s2 { @extend .split-line; background-image:url(bgimg/split_line_s2.png); }
.all-bg { background:url(bgimg/bg_all.png) no-repeat; }
.jx1 { background:url(bgimg/jx_bg.png) no-repeat; }

/* 排版 */

/* 布局 */
body { background:$pageBackground url(bgimg/bg_x.jpg) repeat-x; }
#wrap { background:url(bgimg/foot_bg.png) no-repeat center bottom; }
.wrap-in { background:url(bgimg/main_bg.jpg) no-repeat center 452px; }
.inner-page .wrap-in { background:url(bgimg/inner_main_bg.jpg) no-repeat center 452px; }
#container { width:980px; margin:auto; min-height:300px; height:auto !important; height:300px; overflow:visible; }
	/* 头部 */
	#header { 
		background:url(bgimg/head_bg.jpg) no-repeat center top; *zoom:1; 

		.head-in { position:relative; width:1000px; margin:auto; }

		// 参加人数
		.status { 
			position:absolute; left:50%; top:383px; width:228px; margin-left:271px;   

			i { float:left; width:35px;	height:35px; margin-right:2px; font-size:24px; color:#0C76AD; text-align:center; _display:inline; }

			.ten { margin-top:2px; }
			.hundred { margin-top:4px; }
			.thousand { margin-top:5px; }
			.ten-thousand { margin-top:7px; }
			.hundred-thousand { @extend .ten-thousand; }
		}
	}

	/* 头图 */
	.banner { 
		position:relative; height:370px;

		.link-zl { position:absolute; right:25px; top:30px; width:100px; height:65px; @include hide-text; }

		.link-jblm { @extend .link-zl; left:0; top:34px; width:80px; }
	}



	/*主导航*/
	.nav { 
		position:relative; height:82px;  

		li { 
			float:left;

			a { float:left; height:45px; overflow:hidden; text-indent:-9999px; _display:inline; }
		}

		.nav-home { width:113px; margin:10px 0 0 15px; }

		.nav-records { width:182px; margin-top:15px; }

		.nav-intro { width:146px; margin-top:18px; }

		.nav-extra { width:146px; margin-top:18px; }
	}
	#home .nav-home { height:67px; margin-top:-10px; }
	#records .nav-records { height:67px; margin-top:-2px; background-position:-112px -8px; }
	#intro .nav-intro { height:61px; margin-top:4px; background-position:-294px -14px; }
	#extra .nav-extra { height:63px; margin-top:2px; background-position:-440px -12px; }

	/* 两栏布局 */
	.layout {
		@include clearfix; margin-bottom:20px; 

		// 主栏
		.main {
			float:left; width:100%;

			.main-cont { padding:0 300px 0 0; }
		}

		// 侧栏 
		.aside { float:left; width:280px; margin-left:-280px; }
	}

	/* 尾部 */
	#footer {
		padding:15px 0 150px; text-align:center; color:#fff; line-height:22px; 

		a { color:#fff; margin:0 3px; }
	}

/* 按钮 */
.btn-login { @extend .btn-bg; width:207px; height:58px; margin:0 auto; overflow:hidden; text-indent:-9999px; }
.btn-exchange { @extend .btn-bg; background-position:0 -78px; width:144px; height:40px; overflow:hidden; text-indent:-9999px; }
.btn-addfollow { display:inline-block; width:63px; height:24px; @extend .all-bg; background-position:0 -523px; }
.btn-exchange-s2 { @extend .btn-bg; width:149px; height:47px; background-position:0 -138px; overflow:hidden; text-indent:-9999px; }

/* Tab */

/* 图标 */
.ico-qzone { display:inline-block; width:16px; height:16px; background-position:-16px 0; @include hide-text; }
.ico-weibo { @extend .ico-qzone; background-position:-16px -36px; }
.ico-tecent-weibo { @extend .ico-qzone; background-position:-16px -72px; }
.ico-renren { @extend .ico-qzone; background-position:-16px -108px; }
.ico-jblm { display:inline-block; @extend .all-bg; width:46px; height:39px; background-position:-78px -88px; text-indent:-9999px; }

/* 浮层 */

/* 公用模块样式 */
// ---------------------------------------------------------------------

// 分享链接
html { _background:url(#); }
.share { 
	position:fixed; left:50%; top:0; margin-left:505px; width:16px; height:164px; line-height:18px; padding:8px; font-size:14px; color:#4B3F52; z-index:100; _position:absolute; _bottom:auto; _top:expression(documentElement.scrollTop);

	a { vertical-align:middle; margin:4px 0; }

	.bg { position:absolute; left:0; top:0; width:32px; height:164px; background:#B4D8F8; @include border-radius(3px); z-index:-1; }
}



/* 页面级别样式 */
// ---------------------------------------------------------------------

/* 首页 */
// ----------------------------------
//焦点图
.focus {
	position:relative; height:393px; margin-bottom:20px; z-index:1; 

	.focus-pic {
		position:absolute; left:-68px; top:0; z-index:10; 

		//.pic-container { position:absolute; left:0; top:0; }	
	}

	@media screen and (-webkit-min-device-pixel-ratio:0)
	{
		.focus-pic { left:-67px; }
	}

	.focus-tab { 
		position:absolute; right:20px; bottom:20px; width:100px; height:20px; z-index:10000;

		li { float:left; width:20px; height:20px; margin-left:10px; @include border-radius(10px); background:#979797; color:#fff; font-size:14px; font-weight:bold; text-align:center; _display:inline; }

		.active { background:#DE5B04; }
	}
}


//活动流程
.flows { 
	height:64px; padding-left:15px; margin-bottom:15px; border:1px solid #D8F5FE; @include border-radius(4px); background:#8AD9FA; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; font-size:14px; color:#4B5153; font-style:italic;  

	div { 
		@extend .all-bg; float:left; height:46px; padding:5px 0 0 54px; margin:5px 10px 0 0; white-space:nowrap; _display:inline; 

		a { color:#3559B3; }
	}

	.flow1 { background-position:0 -150px; padding-left:100px; }

	.flow2 { background-position:0 -221px; }

	.flow3 { background-position:0 -292px; }

	.flow4 { background-position:0 -363px; }

}

//活动品牌
.brands { 
	border:2px solid #008DBD; @include border-radius(6px); background:#21B8EF; padding:5px 7px 0; 

	.tab { 
		position:relative; background:#8AD9FA; *zoom:1;

		h3 { position:absolute; left:10px; top:10px; color:#0C4783; @include text-shadow(1px 1px 0 #fff); font:bold 24px/60px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; }

		ul { height:74px; margin-left:100px ; }

		li { float:left; width:85px; height:52px; padding:2px 5px; margin:8px 0 0 15px; background:#fff; @include border-radius(6px); _display:inline; }

		.active { padding:6px 7px 8px; @include border-radius(6px 6px 0 0); @include box-shadow(1px 1px 4px rgba(0,0,0,.8)); }
	}

	.cont { 
		display:none; position:relative; height:156px; background:#8AD9FA; padding:0 6px 6px; z-index:2; *zoom:1; 

		.slides {
			background:#fff; 

			.slides-cont { width:590px; margin:0 auto; overflow:hidden; }

			ul { @include clearfix; float:left; }

			li { 
				float:left; width:196px; height:134px; margin:8px 0; border-right:1px solid #ddd; text-align:center; *zoom:1;

				img { display:block; margin:0 auto; }

				span { display:block; font-size:14px; color:#7B7F6E; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; }

				.value {
					color:#474747; 

					em { color:#FF3333; }
				}
			}
		}

		.prev-s1 { position:absolute; left:10px; top:64px; @extend .all-bg; background-position:-96px 0; width:28px; height:28px; overflow:hidden; text-indent:-9999px; }

		.next-s1 { @extend .prev-s1; left:auto; right:10px; background-position:-144px 0; }

		.prev-s2 { @extend .prev-s1; background-position:0 0; }

		.next-s2 { @extend .prev-s1; left:auto; right:10px; background-position:-48px 0; }
	}

	.guide {
		@include clearfix; padding:5px 0; 

		h3 { float:left; margin-right:40px; font-size:14px; color:#fff; _display:inline; }

		ul { 
			float:left; 

			li {
				float:left; margin-right:15px; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6B644B; _display:inline; 

				i { display:inline-block; width:16px; background:#519DD8; color:#fff; font-weight:bold; margin-right:4px; text-align:center; @include border-radius(3px); }

				a { color:#3559B3; }
			}
		}
	}
}

//登录
.login { 
	@include clearfix; margin-bottom:5px; 

	.btn-login { float:left; margin-left:30px; _display:inline; }
}

//积金币
.integral { 
	position:relative; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; line-height:22px; margin-bottom:40px;  

	li { @extend .split-line; padding:8px 0; }

	.pic { 
		float:right; width:48px; 

		img { border:1px solid #BEC5CC; @include border-radius(5px); }
	}

	.info { 
		margin-right:60px; font-size:14px; 

		.user {
			color:#000; 

			.time { float:right; width:70px; }
		}

		.desc {
			color:#454F53; 

			.coins { 
				float:right; width:70px; 

				i { color:#FF1E00; }
			}
		}
	}
}

// 活动公告
.notice {
	margin-bottom:20px; 

	.hd { 
		border-bottom:2px solid #2F87D2; 

		h3 { font:normal 24px/1.5 "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#0C4783; @include text-shadow(1px 1px 0 #55FFFF); }
	}
	li { 
		font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; font-size:14px; padding:6px 0; 

		a { color:#474747; }

		span { float:right; color:#474747; }
	}

}

// 侧栏广告
.ad-aside { 
	width:268px; margin:0 auto; border:1px solid #197CDA; 

	img { display:block; }
}


//金喜1
.suprize1 {
	position:relative; height:425px; margin-bottom:20px; @extend .ornagments; 

	.info { position:absolute; left:37px; top:264px; width:400px; font-size:18px; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#000; line-height:34px; text-indent:2em; }

	.prize-list {
		@include clearfix; padding:75px 0 0 450px; 
		li {
			float:left; width:142px; margin:8px 15px; _display:inline;  

			.pic { 
				border:2px solid #A1D7EB; @include border-radius(8px); 

				img { display:block; @include border-radius(6px); }
			}

			span { 
				display:block; margin-top:5px; font-size:14px; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6B644B; text-align:center; 

				em { color:#FF1E00; }
			}
		}
	}
	.or1 { position:absolute; left:-63px; top:9px; width:63px; height:416px; @extend .ornagments; background-position:0 -986px; }

	.or2 { position:absolute; right:-119px; top:-23px; width:119px; height:444px; @extend .ornagments; background-position:-83px -986px; }

	.btn-exchange { position:absolute; right:56px; top:18px; }
}

//金喜2
.suprize2 {
	position:relative; height:412px; padding:109px 9px 0; margin-bottom:10px; @extend .ornagments; background-position:0 -445px; 

	.timeline {
		@include clearfix; padding-left:50px; margin-bottom:10px; background:#BEE6FB; height:33px; *overflow:hidden; 

		span { float:left; width:52px; text-align:center; line-height:33px; color:#474747; cursor:default; }

		.active { position:relative; @extend .all-bg; width:58px; height:42px; background-position:0 -88px; }
	}

	.status { 
		line-height:40px; padding:0 0 3px 50px; font-size:14px; color:#474747; font-weight:bold; overflow:hidden;  

		span { margin-right:20px; }

		em { margin:0 4px; font-size:24px; color:#F55202; }
	}

	.schedule {
		float:right; width:296px; 

		.hd {
			line-height:30px; 

			span { float:right; color:#474747; }

			h3 { font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; font-size:16px; color:#417CCB; }
		}

		.bd {
			height:235px; background:#fff; padding:10px; @include border-radius(4px);   

			table {
				width:100%; color:#625A3F; font-size:14px; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; border-collapse:collapse; 

				td { @extend .split-line-s2; padding:6px 8px; }
			}
		}
	}

	.winners {
		float:left; width:646px; background:#fff; height:255px; margin-top:30px; @include border-radius(4px);
	}

	.events {
		position:relative; float:left; width:239px; height:239px; margin:5px 0 0 10px; padding-right:15px;
		_padding-right:14px; overflow:hidden; _display:inline; 

		li {
			position:relative; @include clearfix; @extend .split-line-s2; height:50px; padding:5px 0 6px 5px; @include border-radius(4px); vertical-align:top; cursor:default; 
			.avatar {
				float:left; width:50px; 
				img { display:block; }
			}

			.info { margin-left:66px; _margin-left:63px; font-size:14px; color:#6B644B; line-height:24px; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; }

			i { display:none; position:absolute; right:-15px; top:19px; height:0; width:0; overflow:hidden; border-width:10px; border-style:dashed solid dashed dashed; border-color:transparent #EBEBEB transparent transparent; }
		}

		.active { 
			background:#EBEBEB; 

			i { display:inline; }
		}
	}

	.winner-list {
		position:relative; float:left; width:377px; height:245px; margin:5px 0; background:#EFEFEF; font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; _display:inline; 

		h3 { font-size:16px; color:#417CCB; line-height:40px; text-align:center; }

		li { 
			@extend .split-line-s2; padding:6px 10px; font-size:14px; color:#625A3F; *zoom:1;

			span { margin-left:15px; }
		}

		p { position:absolute; right:10px; top:-30px; color:#474747; }
	}

	.prev { position:absolute; left:123px; top:202px; @extend .all-bg; background-position:0 -48px; width:22px; height:20px; overflow:hidden; text-indent:-9999px; }

	.next { @extend .prev; top:486px; background-position:-42px -48px; }

	.or3 { position:absolute; left:-265px; top:-8px; width:265px; height:529px; @extend .ornagments; background-position:-222px -986px; }

	.or4 { position:absolute; right:-27px; top:82px; width:27px; height:432px; @extend .ornagments; background-position:-507px -986px; }
}

.contact { 
	@include clearfix;

	h2 { @extend .ornagments; height:48px; margin-left:10px; overflow:hidden; text-indent:-9999px; background-position:-554px -986px; }

	.cont { float:left; width:974px; border:3px solid #0090EC; background:#BBE9F8; @include border-radius(6px); }
}

//新浪微博
.weibo {
	 padding:30px 330px 20px 20px; 

	.intro {
		@include clearfix; margin-bottom:20px; 

		.pic { float:left; width:108px; margin-left:10px; text-align:center; _display:inline; }

		.desc { 
			padding-left:150px; _padding-left:147px; font-size:14px; color:#000; line-height:24px;  

			a { font-weight:bold; color:#2684C9; }

			.tips { font-size:14px; color:#474747; margin-top:10px; }
		}

		.logo-jblm { display:inline-block; width:108px; height:69px; @extend .all-bg; background-position:0 -432px; }
	}

	.weibo-post {
		height:340px; overflow:hidden; border:1px solid #A5C2CC; *zoom:1; 
	}
}

//合作方
.cooperation {
	float:left; width:270px; margin-left:-290px; 

	.mod-s1 {
		margin-top:30px; 
		
		.hd { 
			border-bottom:1px solid #98BDC9; 

			h3 { font:20px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#0C4783; @include text-shadow(1px 1px 0 #fff); }
		}

		.bd { @include clearfix; }
	}

	li { float:left; width:102px; height:45px; margin:20px 20px 0 0; _display:inline; }
}

/* 内页 */
// ----------------------------------
.mod {
	padding:0 16px; 
	.box {
		padding:20px; background:#ADE1F3; border:3px solid #70C6E3; min-height:280px; height:auto !important; height:280px; overflow:visible; @include border-radius(5px); 

		.sec {
			margin-bottom:40px; 

			.desc { text-indent:2em; }
	
		}

		a { color:#3072C3; text-decoration:underline; }

		h4 { font:bold 18px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#0C4783; }

		.tips { color:#7C8476; }
	}
}

.table {
	width:100%; border-collapse:collapse;

	th { padding:10px; font-size:16px; font-weight:bold; color:#0D5BC3; text-align:left; }

	td { 
		padding:8px 10px; font-size:14px; color:#6B644B; 

		a { color:#4988CD; }

		.event { margin-right:20px; }
	}

	.even { background:#E1F0F5; }
}

.pager {
	text-align:right; margin-top:20px; font-size:14px; 

	a { margin-left:30px; color:#2883CA; }
}

.intro-list {

	font:16px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6b644b;

	li {
		position:relative; padding-left:20px; *zoom:1;

		i { position:absolute; left:0; top:0; }
	}

	a, span { color:#2883CA; }
}

/* 我的活动记录 */
// ----------------------------------
.my-records {
	position:relative; padding:0 26px 0 6px; background:url(bgimg/my_activity_bg.png) no-repeat; _zoom:1;

	.box { min-height:400px; height:auto !important; height:400px; overflow:visible; }

	.or { position:absolute; left:-91px; top:67px; width:91px; height:415px; background:url(bgimg/my_record_ornagment.png) no-repeat; }

	.hd { 
		height:92px; font:20px/42px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#fff; 

		.filter { padding:27px 0 0 13px; }

		a { 
			position:relative; float:left; color:#fff; padding:0 12px; margin-right:39px; _display:inline; 

			i { display:none; position:absolute; left:50%; top:42px; margin-left:-10px; height:0; width:0; overflow:hidden; border-width:10px; border-style:solid dashed dashed dashed; border-color:#0D5BC3 transparent transparent transparent; }
		}

		.cur { 
			background:#0D5BC3; 

			i { display:inline; }
		}
	}

	.tips-no-data { 
		padding:100px 0 0 100px; font-size:14px; color:#464749; 

		a { color:#2883CA; }
	}
}

/* 活动详情 */
// ----------------------------------
	// 活动说明
	.mod-intro {
		background:url(bgimg/intro_bg.png) no-repeat; margin-bottom:20px; font:16px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6B644B; 

		.hd { height:72px; overflow:hidden; text-indent:-9999px; }

		.box {
			padding:20px 40px 20px 30px; 

			.intro { 
				font-size:18px; color:#3D555F; font-weight:bold; margin-bottom:20px; text-indent:2em; 

				img { vertical-align:middle; margin:0 5px; }
			}	

			.jx1 { overflow:hidden; text-indent:-9999px; height:75px; margin-bottom:10px; }

			.jx2 { @extend .jx1; background-position:0 -95px; }

			.jx3 { @extend .jx1; height:76px; background-position:0 -190px; }

			.ico-scjx { display:inline-block; @extend .jx1; width:115px; height:33px; line-height:33px; background-position:0 -286px; margin:5px; vertical-align:middle; }
		}
		
	}

	// 参与方式
	.mod-way {
		background:url(bgimg/way_bg.png) no-repeat; margin-bottom:20px;  

		.hd { height:65px; overflow:hidden; text-indent:-9999px; }

		.box { padding:20px 40px; }

		.desc { margin-bottom:20px; font:16px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6B644B; text-indent:2em; }
	}

	// 本次活动品牌及产品
	.mod-brands {
		background:url(bgimg/brands_bg.png) no-repeat; margin-bottom:20px; font:16px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6B644B;

		.hd { height:62px; overflow:hidden; text-indent:-9999px; }

		.box { padding:20px 40px; }

		li {
			@include clearfix; margin-bottom:30px; 

			.pic { float:left; width:85px; height:52px; background:#fff; padding:5px; @include border-radius(5px); }

			.info { margin-left:115px; _margin-right:112px; }
		}
	
	}

	// 注意事项
	.mod-notice {
		background:url(bgimg/notice_bg.png) no-repeat; 

		.hd { height:46px; overflow:hidden; text-indent:-9999px; }
	}

/* 额外金喜 */
// ----------------------------------
	// 拿好礼
	.extra-ad { margin-bottom:10px; }

	// 特供礼品
	.mod-prize {
		background:url(bgimg/prize_bg.png) no-repeat; margin-bottom:20px;  

		.hd { 
			height:59px; overflow:hidden; text-indent:-9999px; 

			a { float:right; }
		}

		.item {
			position:relative; *zoom:1;
			.pic {
				position:absolute; left:10px; top:5px; border:2px solid #A1D7EB; @include border-radius(8px); 

				img { display:block; @include border-radius(6px); }
			}

			.info {
				padding:0 200px 30px 196px; 

				h3 {
					font:24px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#89700F; padding-top:10px; 

					span { margin-left:20px; color:#6F6C56; }

					em { color:#f00; }
				}

				.desc {
					margin-top:25px; font:16px/30px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; color:#6b644b;

					p { margin-bottom:10px; }
				}
			}

			.btn-exchange-s2 { position:absolute; right:10px; top:60px; }
		}

		.last { 
			.info { padding-bottom:0; }
		}
	}

	// 规则
	// .mod-rules {
		// background:url(bgimg/rules_bg.png) no-repeat; margin-bottom:20px; 

		// .hd { height:53px; overflow:hidden; text-indent:-9999px; }

		// .box {
			// min-height:180px; height:auto !important; height:180px; overflow:visible;
		// }
	// }

	// 订单
	// .mod-order {
		// background:url(bgimg/order_bg.png) no-repeat; 

		// .hd { height:74px; overflow:hidden; text-indent:-9999px; }
	// }